<!DOCTYPE html>
<html>
<body>

<button onclick="startRecording()">开始录音</button>
<button onclick="stopRecording()">停止录音</button>

<script>
let chunks = [];
let mediaRecorder;

function startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.start();

            mediaRecorder.ondataavailable = e => {
                chunks.push(e.data);
            };
        });
}

function stopRecording() {
    mediaRecorder.stop();

    mediaRecorder.onstop = e => {
        let blob = new Blob(chunks, { 'type' : 'audio/webm; codecs=opus' });
        chunks = [];

        let formData = new FormData();
        formData.append('audio', blob);

        fetch('/upload', {
            method: 'POST',
            body: formData
        });
    };
}
</script>

</body>
</html>